﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SortTable.aspx.cs" Inherits="admin_system_SortTable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/admin/Css/Common.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jQuery1.7.js" type="text/javascript"></script>
    <script src="/Plugin/artDialog/jquery.artDialog.source.js?skin=blue" type="text/javascript"></script>
    <script src="/Plugin/artDialog/iframeTools.source.js" type="text/javascript"></script>
    <script src="/Plugin/jQueryUI/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="/Plugin/jQueryUI/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="/Plugin/jQueryUI/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="/Plugin/jQueryUI/ui/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="/Plugin/jQueryUI/ui/jquery.ui.sortable.js" type="text/javascript"></script>
    <style type="text/css">
        .move
        {
            background-color: #cfcfcf;
        }
        .box
        {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            height: 27px;
            line-height: 27px;
            cursor: move;
        }
        .placeholder
        {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            height: 25px;
            background-color: #FCEFA1;
        }
    </style>
    <script language="javascript" type="text/javascript">
        art.dialog.data("Refresh", "false");  //初始化当窗口关闭时弹出页面是否刷新，用于提交时让列表页面显示新列表数据

        $(function () {

            //绑定排序事件
            $("#sortable").sortable({
                revert: true,
                start: function (e, ui) {

                },
                placeholder: "placeholder",
                stop: function (event, ui) {
                    var obj = $(ui.item);
                    $.post(
                                "SortTable.aspx?act=sort",
                                {
                                    cid: obj.attr("id"),
                                    targetid: obj.next().attr("id")
                                },
                                function (txt) {
                                    $("#div_tipmsg").html("“" + $.trim(obj.find("span").html()) + "”  排序成功！");
                                    art.dialog.data("Refresh", "true");
                                }
                            );

                }
            });
            $("#sortable").disableSelection();
        });

        //鼠标在元素上时添加样式
        var addClass = function (o) {
            $(o).addClass("move");
        }

        //鼠标移开元素时删除样式 
        var removeClass = function (o) {
            $(o).removeClass("move");
        }
    </script>
</head>
<body>
    <div id="sortable" style="margin: 20px 40px 5px 40px; border-bottom: 1px solid #ccc;">
        <asp:Repeater ID="rpTreeList" runat="server">
            <ItemTemplate>
                <div id="<%#Eval("C_ID")%>" state="false" depth="<%#Eval("C_Depth")%>" name="<%#Eval("C_Parent_ID")%>"
                    class="box <%#Eval("C_Path").ToString().Replace("|"," ")%>" onmousemove="addClass(this)"
                    onmouseout="removeClass(this)">
                    &nbsp;&nbsp;&nbsp;<span id="ClassContent">
                        <%#Eval("C_Name")%></span>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <div id="div_tipmsg" style="height: 20px;">
    </div>
</body>
</html>
